import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import styles from './index.module.less';

export default ({ userList, handleOk, handleCancel }) => {
  return (<div className={styles.customModalMask}>
    <div className={styles.customModalContent}>
      <div className={styles.modalHeader}>
        选择需要登入的账号
        <div className="close" onClick={handleCancel}>X</div>
      </div>
      <div className={styles.modalBody}>
        {
          userList.map(item => {
            if(!item.headImgUrl){
              delete item.headImgUrl;
            }
            return (<div className="accountItem" onClick={()=>handleOk(item)} key={item.account}>
              <div className="accountContent">
                <div className="avator">
                  <Avatar src={item.headImgUrl} icon={<UserOutlined />} size="large" />
                </div>
                <div className="accountInfo">
                  <p>{item.account}</p>
                  <span>{item.authentication}</span>
                </div>
              </div>
            </div>)
          })
        }
      </div>
    </div>
  </div>)
}